<template>
	<el-dialog :title="'新建目录'" :visible.sync="folderVisible" width="360px">
		<div class="rename-content">
			<span class="rename-title">目录名称</span>
			<el-input class="rename-input" v-model="form.name"></el-input>
		</div>
		<div class="superior-content">
			<span class="rename-title">所属文件夹</span>
			<div class="superior-content-item">
				<img class="svg-icon" :src="src">
			    <span class="superior-content-title">{{label}}</span>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="folderVisible = false">取 消</el-button>
			<el-button type="primary" @click="dirsaveclick">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import {save} from '@/api/dir'
	export default{
		data(){
			return{
				src: require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
				folderVisible:false,
				form:{
					name:"",
					parentDirId:"",
					dirType:""
				},
				label:"全部"
			}
		},
		watch:{
			dirType(newval,oldval){

				this.form.dirType=newval
			}
		},
		props: ['dirType'],
		created(){
			this.form.dirType=this.dirType
		},
		methods:{
			dirsaveclick(){
				save(this.form).then(res=>{
					this.folderVisible = false
					this.$emit('dirgetTreeDataclick')
					this.form.name=""
				})
			},
			loadFolder(){
				this.folderVisible = true

			},
			childrenFolder(data){
				this.folderVisible = true
				this.form.parentDirId=data.id
				this.label=data.label
			},
		}
	}
</script>

<style scoped>
	.rename-content{
		display: flex;
		flex-direction: column;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.rename-content-title{
		font-size: 14px;
	}

	.rename-input{
		flex: 1;
	}

	.rename-title{
		font-size: 14px;
		font-weight: 700;
		color: #2e405e;
		margin-bottom: 10px;
		display: block;
	}

	.superior-content{
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.superior-content-item{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.superior-content-title{
		font-size: 12px;
		color: #2e405e;
	}


	.svg-icon {
		width: 18px;
		height: 18px;
		margin-right: 6px;
		flex-shrink: 0;
	}

	/deep/.el-dialog .el-dialog__footer{
		border-color: white;
	}

	/deep/.el-dialog__title{
		font-weight: bold;
		font-size: 16px;
	}
</style>
